<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="box">
        等待加载
    </div>

    <script>
        var box = document.getElementById('box')
        box.style.width = '100px'
        box.style.height = '100px'

        /*
        Promise 对象，是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
        可以将异步操作以同步操作的流程表达出来。
        它由两个函数组成：resolve 和 reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。

        Promise 中的函数可以理解为一个事件，事件被创建，并立即被执行，执行的结果要么是 resolve，要么是 reject。
        但对于这两个结果使用的方法如 then ，则不会立即执行，而是等到当前执行栈中的其他同步代码执行完毕后再执行。
        */

        // 加载图片资源的例子
        function loadImageAsync(url) {
            const promise = new Promise(
                function (resolve, reject) {  // 此处的两个单词不要修改
                    const image = new Image()  // 创建一个 Image 对象
                    image.src = url  // 设置 Image 对象的 src 属性，image 才会开始加载图片资源，才会有后续的 onload 和 onerror 事件

                    // onload 事件在图像加载完成后触发
                    // 当图片加载完成时，将图片作为参数传递给 resolve 函数
                    image.onload = function () {
                        resolve(image)
                    }
                    // onerror 事件在图像加载失败后触发
                    // 当图片加载失败时，将错误信息作为参数传递给 reject 函数
                    image.onerror = function () {
                        reject(new Error('Could not load image at ' + url))
                    }
                }
            )
            // 返回 Promise 对象
            return promise
        }

        // 调用 loadImageAsync 函数加载图片资源
        const promise = loadImageAsync("https://www.shanghairanking.cn/_uni/logo/27532357.png")
        promise.then(
            function (value) {  // value 就是 promise 中 resolve 函数的参数，即 Image 对象
                // 去掉“等待加载“
                box.innerHTML = ''
                // 当图片加载成功时，将图片添加到页面中
                box.appendChild(value)

                console.log('Image loaded successfully:', value)
            },
            function (error) {  // error 就是 promise 中 reject 函数的参数，即 Error 对象
                console.log('Image loading failed:', error)
            }
        )


    </script>
</body>

</html>